<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*.content.red{
            background:red;
        }*/
        /*.content~.heading{
            background:red;
        }*/


        /**
           css2.1
           匹配.content后面的所有同级.footer元素的第一个
        **/

        .content+.footer{
           padding: 10px 0;
           font-size:30px;
        }

        /**
            css3
            匹配.content后面的所有同级.footer元素
        **/
        .content~.footer{
            background:green;
        }
    </style>
</head>
<body>
    <div class="heading">
        heading
    </div>
    <div class="content red">
        red
    </div>
    <div class="footer">
        footer1
    </div>
    <div class="footer">
        footer2
    </div>
</body>
</html>